<template>
	<view class="out-box">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 页面标题 -->
		<view class="pageTitle">
			数据统计
		</view>
		<!-- 总收支 -->
		<view class="allExpensePay">
			<!-- 收入 -->
			<view class="allexpay">
				<view class="allexpay-icon expense">
					<image src="../../static/zhang.svg"></image>
				</view>
				<view class="allexpay-text">
					<view class="allexpay-text-number" v-if="state.dataList[0]">
						￥{{state.dataList[0]['0']}}
					</view>
					<view class="allexpay-text-title">
						收入
					</view>
				</view>
			</view>
			<!-- 支出 -->
			<view class="allexpay">
				<view class="allexpay-icon pay">
					<image src="../../static/die.svg"></image>
				</view>
				<view class="allexpay-text">
					<view class="allexpay-text-number" v-if="state.dataList[0]">
						￥{{state.dataList[0]['1']}}
					</view>
					<view class="allexpay-text-title">
						支出
					</view>
				</view>
			</view>
		</view>
		<!-- 概述，切换时间点 -->
		<view class="changeTime">
			<view class="changeTime-text">
				概述
			</view>
			<view class="changeTime-select" @click="selectTime">
				<view class="time">
					{{state.dateTitle}}
				</view>
				<view class="icon">
					<image src="../../static/xiajiantou.svg"></image>
				</view>
			</view>
		</view>
		<!-- ucharts图 -->
		<view class="uchartType">
			<!-- 柱状图 -->
			<view class="ucharts-line" v-if="state.sweekShow == true">
				<qiun-data-charts type="column" :opts="state.opts" :chartData="state.chartData" :canvas2d="true"
					canvasId="pdwSBmykusPTdKaXcFgGIgxiQYszuJyn" />
			</view>
			<!-- 折线图 -->
			<view class="ucharts-line" v-if="state.sweekShow == false">
				<qiun-data-charts type="area" :opts="state.optss" :chartData="state.chartData" />
			</view>
		</view>
		<!-- 类别 -->
		<view class="typeBox">
			<!-- 类别标题 -->
			<view class="type-title">
				<view class="text">
					类别
				</view>
			</view>
			<!-- 各大类别占比 -->
			<view class="bigType">
				<view class="selectBtn">
					<view class="btn" @click="bigTypeSelect(1)">
						<view class="left" :class="state.loudouBg == 1?'leftBg':''"></view>
						<text>支出</text>
					</view>
					<view class="btn" @click="bigTypeSelect(2)">
						<view class="left" :class="state.loudouBg == 2?'leftBg':''"></view>
						<text>收入</text>
					</view>
					<view class="btn" @click="bigTypeSelect(3)">
						<view class="left" :class="state.loudouBg == 3?'leftBg':''"></view>
						<text>结余</text>
					</view>
				</view>
				<BigType :dataList="state.dataList" :typeNum="state.loudouBg"></BigType>
			</view>
		</view>
		<!-- 日期选择器 -->
		<view class="calendarSelect" :class="state.dateHiden==true?'transTime':''">
			<DateSelect @getDate="getDate"></DateSelect>
		</view>
		<!-- 遮罩层 -->
		<u-overlay :show="state.dateHiden" z-index="4" @click="closeTime"></u-overlay>
	</view>
</template>

<script setup>
	import DateSelect from '../../components/candel/candel.vue'
	import BigType from '../../components/bigType/bigType.vue'
	import {
		onMounted,
		reactive
	} from "vue";
	import {onPullDownRefresh} from '@dcloudio/uni-app';
	const state = reactive({
		chartData: {},
		//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		opts: {
			// color: ["#FAC858", "#EE6666", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			// 	"#ea7ccc"
			// ],
			color: [
				"#31D0CA",
				"#FFC35E",
				"#73C0DE"
			],
			padding: [15, 15, 0, 5],
			enableScroll: false,
			legend: {
				itemGap: 20
			},
			xAxis: {
				disableGrid: true,
				axisLine: false
			},
			yAxis: {
				data: [{
					min: 0,
					axisLine: false
				}],
				splitNumber: 5,
				gridType: 'dash'
			},
			extra: {
				column: {
					type: "group",
					width: 14,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "custom",
					seriesGap: 2,
					linearOpacity: 0.5,
					barBorderCircle: true,
					customColor: [
						"#31D0CA",
						"#FFC35E",
						"#73C0DE"
					]
				}
			},
			dataLabel: false
		},
		optss: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 15, 0, 15],
			enableScroll: false,
			legend: {},
			xAxis: {
				disableGrid: true,
				axisLine: false,
				fontSize:6
			},
			
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				data: [{
					min: 0,
					axisLine: false
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow"
				}
			},
			dataLabel: false
		},
		token: '',
		userInfo: {},
		chartsData: [],
		allArray: [],
		dateHiden: false,
		dataList: [],
		sweekShow: true,
		loudouBg:1,
		dateTitle:'一周内'
	})

	onMounted(() => {
		getServeData()
		// 获取用户信息
		getUserInfo()
	})
	// 下拉刷新
	onPullDownRefresh(()=>{
		getServeData()
		// 获取用户信息
		getUserInfo()
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},700)
	})
	// 柱状图
	const getServeData = () => {
		setTimeout(() => {
			let now = new Date()
			let check = [];
			for (let i = 0; i < 7; i++) {
				//24 * 3600 * 1000 就是计算一天的时间  
				let date = new Date(now.getTime() - i * 24 * 3600 * 1000);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (month < 10) {
					month = '0' + month.toString()
				}
				let day = date.getDate();
				if (day < 10) {
					day = '0' + day.toString()
				}
				let dt2 = new Date(now.getTime() - i * 24 * 3600 * 1000);
				let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
				check.push({
					date: year + "-" + month + "-" + day,
					day: day,
					weekday: weekDays[dt2.getDay()],
					week: weekDay[dt2.getDay()],
				});

			}
			// console.log(check)
			let week = []
			for (let i = 0; i < check.length; i++) {
				week.push(check[i].date.split('-')[1] + '-' + check[i].date.split('-')[2])
			}
			week = week.reverse()
			state.week = week;
			let lastWeekTime = now.getTime() - 7 * 24 * 60 * 60 * 1000;
			let lastYear = new Date(lastWeekTime).getFullYear();
			let start = lastYear.toString() + '-' + week[0].toString();
			let nowYear = new Date().getFullYear();
			let end = nowYear.toString() + '-' + week[6].toString();
			let end1 = new Date(new Date(end.split('-')[0], end.split('-')[1], end.split('-')[2]).getTime() +
				86400000);
			let end2 = end1.getFullYear().toString() + '-' + end1.getMonth().toString() + '-' + end1.getDate()
				.toString();
			getCount(start, end2, end)
		}, 500);
	}
	// 折线图
	const getServerDataArea = () => {
		let ydate = [];
		let expense = [];
		let pay = [];
		let expy = [];
		if(state.dataList[1][0].length == 12){
			for (let i = 0; i < state.dataList[1][0].length; i++) {
				ydate.push(state.dataList[1][0][i].duration.split('.')[0].toString()+'月');
				expense.push(state.dataList[1][0][i].sum);
				pay.push(state.dataList[1][1][i].sum);
				expy.push(state.dataList[1][2][i].sum);
			}
		}else{
			for (let i = 0; i < state.dataList[1][0].length; i++) {
				ydate.push(state.dataList[1][0][i].duration.split('-')[2]);
				expense.push(state.dataList[1][0][i].sum);
				pay.push(state.dataList[1][1][i].sum);
				expy.push(state.dataList[1][2][i].sum);
			}
		}
		// if(state.dataList[1][0])
		// console.log(state.dataList[1][0])
		// console.log(expense,pay,expy)
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ydate,
				series: [{
						name: "收入",
						data: expense
					},
					{
						name: "支出",
						data: pay
					},
					{
						name: "结余",
						data: expy
					}
				]
			};
			state.chartData = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	// 获取用户信息
	const getUserInfo = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
				uni.request({
					url: 'http://124.221.162.230:8888/user/getById',
					method: "POST",
					header: {
						Authorization: state.token
					},
					success: (res) => {
						// console.log(res)
						state.userInfo = res.data.data
						// getCount()
					}
				})
			}
		})
	}
	// 获取账单信息
	const getCount = (start, end, endt) => {
		let obj = {}
		obj.type = 1;
		obj.startTime = start;
		obj.endTime = endt;
		obj.id = state.userInfo.id
		getServerDataList(obj)
	}
	// 计算本周收入支出数组
	const computeArr = () => {
		let ydate = [];
		let expense = [];
		let pay = [];
		let expy = [];
		for (let i = 0; i < state.dataList[1][0].length; i++) {
			ydate.push(state.dataList[1][0][i].duration.split('-')[2]);
			expense.push(state.dataList[1][0][i].sum);
			pay.push(state.dataList[1][1][i].sum);
			expy.push(state.dataList[1][2][i].sum);
		}
		setTimeout(() => {
			let res = {
				categories: ydate,
				series: [{
						// show:false,
						name: '收入',
						data: expense
					},
					{
						// show:false,
						name: "支出",
						data: pay
					},
					{
						show: false,
						name: '结余',
						data: expy
					}
				]
			};
			state.chartData = JSON.parse(JSON.stringify(res));
		})
	}
	// 获取类别信息
	const getServerDataList = (obj) => {
		uni.request({
			url: 'http://124.221.162.230:8888/bill/billByGraph',
			method: 'POST',
			header: {
				Authorization: state.token
			},
			data: obj,
			success: (res) => {
				state.dataList = res.data.data;
				if(obj.type==1){
					computeArr()
				}else{
					getServerDataArea()
				}
			}
		})
	}
	// 打开日历开始选择时间
	const selectTime = () => {
		state.dateHiden = true
	}
	// 关闭日历
	const closeTime = () => {
		state.dateHiden = false
	}
	// 日历组件传值
	const getDate = (e) => {
		// console.log(e)
		let obj = {}
		obj.id = state.userInfo.id
		if (e.length == 1) {
			obj.type = 3;
			obj.startTime = e[0].toString() + '-01-01';
			obj.endTime = e[0].toString() + '-12-31';
			state.sweekShow = false
			state.dateTitle = '一年内'
		} else {
			if (e[3] - e[2] > 7) {
				obj.type = 2;
				obj.startTime = e[0].toString() + '-' + (e[1]+1).toString() + '-' + e[2].toString();
				obj.endTime = e[0].toString() + '-' + (e[1]+1).toString() + '-' + e[3].toString();
				state.sweekShow = false
				state.dateTitle = '一月内'
			} else {
				obj.type = 1;
				obj.startTime = e[0].toString() + '-' + e[1].toString() + '-' + e[2].toString();
				obj.endTime = e[0].toString() + '-' + e[1].toString() + '-' + e[3].toString();
				state.sweekShow = true
				state.dateTitle = '一周内'
			}
		}
		state.dateHiden = false
		getServerDataList(obj)
	}
	// 漏斗图类型选择
	const bigTypeSelect = (id) => {
		state.loudouBg = id
	}
</script>

<style lang="less" scoped>
	.out-box {
		width: 100vw;
		padding: 0rpx 20rpx 10rpx 20rpx;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background: #F6FBFF;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;

		.oblique-bar {
			position: absolute;
			top: 0;
			right: 100rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
			transform: translateY(-330rpx) rotateZ(-45deg);
		}

		.oblique-bar-two {
			position: absolute;
			top: 0;
			right: 40rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
			transform: rotateZ(-45deg);
		}

		.pageTitle {
			position: relative;
			z-index: 2;
			display: flex;
			height: 140rpx;
			justify-content: center;
			align-items: center;
			color: #011749;
			font-size: 40rpx;
			font-weight: 600;
		}

		.allExpensePay {
			position: relative;
			display: flex;
			width: 100%;
			justify-content: space-around;
			align-items: center;

			.allexpay {
				width: 40%;
				height: 120rpx;
				background: #ffffff;
				border-radius: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
				box-shadow: 0 0rpx 2rpx 2rpx #cccccc41;

				.allexpay-icon {
					width: 80rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 18rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.expense {
					background-color: #f5a52327;
				}

				.pay {
					background-color: #00288435;
				}

				.allexpay-text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 50%;
					height: 100rpx;
					font-size: 20rpx;

					.allexpay-text-number {
						white-space: nowrap;
						max-width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #001648;
						font-weight: 700;
					}

					.allexpay-text-title {
						color: #0016485b;
					}
				}
			}
		}

		.changeTime {
			position: relative;
			z-index: 2;
			margin-top: 40rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.changeTime-text {
				font-size: 36rpx;
				color: #001749;
				font-weight: 600;
			}
			.changeTime-select {
				width: 200rpx;
				height: 60rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0 0rpx 1rpx 1rpx #cccccc41;
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
			
				.time {
					color: #002884;
				}
			
				.icon {
					image {
						margin-top: 14rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.uchartType {
			margin-top: 50rpx;
			position: relative;
			z-index: 2;
			width: 100%;
			height: 500rpx;
			padding-top: 60rpx;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0 0rpx 1rpx 1rpx #cccccc41;

			.ucharts-line {
				width: 100%;
				height: 430rpx;
				// background-color: #ffffff;
				border-radius: 20rpx;
			}
		}

		.typeBox {
			width: 100%;
			position: relative;
			z-index: 2;
			margin-top: 40rpx;

			.type-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 30rpx;
				padding-right: 30rpx;
				box-sizing: border-box;

				.text {
					color: #001749;
					font-size: 36rpx;
					font-weight: 600;
				}
			}
			.bigType{
				margin-top: 50rpx;
				position: relative;
				z-index: 2;
				width: 100%;
				height: 600rpx;
				padding-top: 10rpx;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-shadow: 0 0rpx 1rpx 1rpx #cccccc41;
				.selectBtn{
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					.btn{
						width: 140rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						.left{
							width: 60rpx;
							height: 50%;
							background-color: #f1f1f1;
							margin-right: 20rpx;
						}
						.leftBg{
							background-color: #73C0DE;
						}
					}
				}
			}
		}

		.calendarSelect {
			transition: all 0.5s;
			width: 100vw;
			height: 860rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: -1400rpx;
			left: 0;
			z-index: 5;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			border-top: 2rpx solid #000;
		}

		.transTime {
			transition: all 0.5s;
			transform: translateY(-1400rpx);
		}
	}
</style>